<!DOCTYPE html>

<html lang="en-us"><head>
  <meta charset="utf-8">
  <title>我的文章</title>
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="This is meta description">
  <meta name="generator" content="Hugo 0.74.3" />

  <!-- plugins -->
  
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="plugins/slick/slick.css">

  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css" media="screen">

  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon.png" type="image/x-icon">

  <meta property="og:title" content="Reader | Hugo Personal Blog Template" />
  <meta property="og:description" content="This is meta description" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:updated_time" content="2020-03-15T15:40:24+06:00" />
</head>
<body>
  <!-- navigation -->
   <!-- navigation -->
 <!-- navigation -->
 <header class="navigation">
  <div class="container" id="index">
    <nav class="navbar navbar-expand-lg navbar-white">
      <a class="navbar-brand order-1" href="index.html">
        <img class="img-fluid" width="50px" src="images/图标.png"
          alt="中国传统文化论坛">
      </a>
      <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item @@about__active">
            <a class="nav-link" href="BBS_index.html">论坛</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="chat.html">消息</a>
          </li>
          <li class="nav-item @@services__active">
            <a class="nav-link" href="shop.html">商店</a>
          </li>
        </ul>
      </div>
      <div class="order-2 order-lg-3 d-flex align-items-center">
        <form @submit.prevent="performSearch"> <!-- 阻止表单提交 -->
          <input 
            id="search-query" 
            name="s" 
            type="search" 
            placeholder="输入文章ID"
            v-model="searchId" 
          >
          <button type="submit" class="btn btn-search">搜索</button>
        </form>
        <button class="navbar-toggler border-0 order-1" type="button" data-toggle="collapse" data-target="#navigation">
          <i class="ti-menu"></i>
        </button>
        <ul class="navbar-nav ml-auto" v-if="userid==null">
          <li class="nav-item @@login__active">
              <a class="nav-link" href="Login.html">登录</a>
          </li>
          <li class="nav-item @@register__active">
              <a class="nav-link" href="register.html">注册</a>
          </li>
      </ul>
      <ul class="navbar-nav ml-auto 1ogined" v-else>
          <li class="nav-item @@login__active">
            <span><a class="nav-link" href="person-post.html">{{userid}}</a></span>
          </li>
          <li class="nav-item @@register__active">
              <span v-on:click.prevent="logout"><a class="nav-link" href="BBS_index.html">注销</a></span>
          </li>
      </ul>
      </div>
    </nav>
  </div>
</header>


  <!--引导程序-->
  <script src="js/jquery-3.3.1.min.js"></script> 
  <script src="js/bootstrap.min.js"></script>
  <!--/MENU-JS-->
  <script>
      new Vue({
        el: "#index",
        data: {
          userid: localStorage["userid"],
          searchId: '' // 用于存储搜索的ID
        },
        methods: {
          logout: function() {
            localStorage.clear();
            this.userid = null;
          },
          performSearch: function() {
            if (!this.searchId || this.searchId.trim() === '') {
              // 如果为空，跳转到404页面
              alert("请输入文章id");
              return;
            }
            // 存储搜索ID到localStorage
            localStorage.setItem("num", this.searchId);
            // 跳转到post.html
            location.href = "post.html";
          }
        }
      })
  </script>
  <!-- /navigation -->


<section class="section-sm">
  <div class="container" >
    <div class="row justify-content-center">
      <aside class="col-lg-4 @@sidebar">
      <!-- about me -->
      <div class="widget widget-about" id="person">
        <img class="img-fluid" :src="profileImage" alt="Templates">
        <h3 class="widget-title">{{userid}}</h3>
        <a href="about-me.html" class="btn btn-primary mb-2" >关于我</a>

        <a href="post-elements.html" class="btn btn-primary mb-2">写文章</a>
      </div>
    </aside>
    <div class="col-lg-8 mb-5 mb-lg-0" id="postlist">
      <h2 class="h5 section-title">我的文章</h2>
      
      <!-- 文章列表 -->
      <article class="card mb-4" v-for="(item, index) in paginatedList" :key="index">
        <div class="card-body">
          <h3 class="mb-3" @click="getRowId(item.id)">{{item.title}}</h3>
          <ul class="card-meta list-inline">
            <li class="list-inline-item" id="picture">
              <a class="card-meta-author" id="picture">
                <span>{{item.userId}}</span>
              </a>
            </li>
            <li class="list-inline-item">
              <i class="ti-calendar">{{ item.time.replace('T', ' ') }}</i>
            </li>
            <li class="list-inline-item">
              <ul class="card-meta-tag list-inline">
                <li class="list-inline-item">
                  <a @click="storetag(item.topicType)">{{item.topicType}}</a>
                </li>
              </ul>
            </li>
          </ul>
          <p>{{item.text.slice(0, 100)}}</p>
          <a class="btn btn-outline-primary" @click="getRowId(item.id)">Read More</a>
        </div>
      </article>
  
      <!-- 无数据提示 -->
      <div v-if="list.length === 0" class="text-center py-5">
        <p class="text-muted">暂无文章</p>
      </div>
  
      <!-- 分页导航 -->
      <nav v-if="list.length > 0" aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
          <li class="page-item" :class="{ disabled: currentPage === 1 }">
            <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">
              <i class="ti-angle-left"></i>
            </a>
          </li>
          <li class="page-item" v-for="page in pageNumbers" :key="page" 
              :class="{ active: page === currentPage }">
            <a class="page-link" href="#" @click.prevent="changePage(page)">
              {{ page }}
            </a>
          </li>
          <li class="page-item" :class="{ disabled: currentPage === totalPages }">
            <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">
              <i class="ti-angle-right"></i>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  </div>
</section>
<script>
  new Vue({
      el:"#person",
      data:{
          userid:localStorage["userid"],
      },
      computed: {
      // 计算属性用于获取用户图片
      profileImage: function() {
        // 如果 localStorage 中有 userProfileImagePath，返回其值，否则使用默认图片路径
        return localStorage["relativePath"] || "images/person/userImg.jpg";
      }
    },
      methods:{
          logout:function(){
              localStorage.clear();
              this.userid=null;
          }
      }
      
  })
</script>

<script>
  var vm = new Vue({
      el: "#postlist",
      data: {
          userid: localStorage["userid"],
          list: new Array(),
          currentPage: 1,
          itemsPerPage: 4, 
          maxPageNumbers:10,
      },
      mounted() {
        this.getpost();  
      },
      computed: {
        // 计算总页数
        totalPages() {
          return Math.ceil(this.list.length / this.itemsPerPage)
        },
        // 当前页显示的文章列表
        paginatedList() {
          const start = (this.currentPage - 1) * this.itemsPerPage
          const end = start + this.itemsPerPage
          return this.list.slice(start, end)
        },
        // 计算要显示哪些页码
        pageNumbers() {
          let start = Math.max(1, this.currentPage - Math.floor(this.maxPageNumbers / 2))
          let end = start + this.maxPageNumbers - 1
          if (end > this.totalPages) {
            end = this.totalPages
            start = Math.max(1, end - this.maxPageNumbers + 1)
          }
          return Array.from({length: end - start + 1}, (_, i) => start + i)
        }
      },
      methods: {
          // 切换页码
          changePage(page) {
            if (page >= 1 && page <= this.totalPages) {
              this.currentPage = page
              window.scrollTo({ top: 0, behavior: 'smooth' })
            }
          },
          getpost: function () {
              var postInfo = {
                  id: "",
                  time: "",
                  userId: "",
                  text: "",
                  title: "",
                  likeNum: "",
                  commentNum:"",
                  isVisable: "",
                  topicType: "",
                  postType: "",
                  weight: ""
              }; 
              var userId = this.userid == "" ? -1 : this.userid;
              axios.get("https://localhost:7071/api/Post?id=-1"+ 
                  "&userId="+ userId +
                  "&topicType=N%2FA&postType=N%2FA"
                  ).then((res) => 
                  {
                      res.data.sort((a, b) => new Date(b.time) - new Date(a.time));
                      for (d in res.data) {
                        if(res.data[d].isVisable==true){  
                          postInfo.id = res.data[d].id;
                          postInfo.time = res.data[d].time;
                          postInfo.userId = res.data[d].userId;
                          postInfo.text = res.data[d].text;
                          postInfo.title = res.data[d].title;
                          postInfo.likeNum = res.data[d].likeNum;
                          postInfo.commentNum = res.data[d].commentNum;
                          postInfo.isVisable = res.data[d].isVisable;
                          postInfo.topicType = res.data[d].topicType;
                          postInfo.postType = res.data[d].postType;
                          postInfo.weight = res.data[d].weight;
                          localStorage["postInfo"+res.data[d].id] = JSON.stringify(postInfo);
                          this.list.push(res.data[d]);
                      }}
                  })
          },
          storetag:function(topicType){
            localStorage.setItem("selectedTag", topicType);
            location.href = "tags.html";
          },
          getRowId:function(id){
            localStorage["num"]=id;
            location.href = "post-details.html";
          }
      }
  })
</script>
<script>
  window.onload = function() {
  // 页面加载完成后，5秒后自动刷新页面
  
  
  // 页面刷新前触发的函数
  window.onbeforeunload = function() {
      alert('页面即将刷新！');
  };
};
</script>

<footer class="footer">
  <svg class="footer-border" height="214" viewBox="0 0 2204 214" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2203 213C2136.58 157.994 1942.77 -33.1996 1633.1 53.0486C1414.13 114.038 1200.92 188.208 967.765 118.127C820.12 73.7483 263.977 -143.754 0.999958 158.899"
      stroke-width="2" />
  </svg>
  
  <div class="container">
      <div class="row align-items-center">
      <div class="col-md-5 text-center text-md-left mb-4">
          <ul class="list-inline footer-list mb-0">
            <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
          </ul>
      </div>
      <div class="col-md-2 text-center mb-4">
          <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" alt="Reader | Hugo Personal Blog Template"></a>
      </div>
      <div class="col-12">
          <div class="border-bottom border-default"></div>
      </div>
      </div>
  </div>
  </footer>
  <script src="plugins/jQuery/jquery.min.js"></script>

  <script src="plugins/bootstrap/bootstrap.js"></script>

  <script src="plugins/slick/slick.min.js"></script>

  <script src="plugins/instafeed/instafeed.min.js"></script>

  <script src="js/script.js"></script></body>
</html>